<template>
  <div class=''>
    <h3>项目地点管理</h3>
    <el-row :gutter="10">
      <el-col :md="22">
        <el-form-item label="项目地址：">
          <el-input v-model="projectAdress" :disabled="true" placeholder="请进入下方地图，确认项目地址"></el-input>
        </el-form-item>
      </el-col>
        <el-col :md="11">
          <baidu-map class="map" @click="mapClick" :dragging="true" :center="center" :zoom="zoom" :mapClick="false" :scroll-wheel-zoom="true">
            <bm-polygon :path="polygonPath" fillColor="#EAF6F7" stroke-color="#A7C1E5" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" />
          </baidu-map>
        </el-col>
      <el-col :md="11" class="latLag">
        <ul  v-if="polygonPath.length">
          <li v-for="(path, index) of polygonPath" :key="index">{{index+1}}.<span>经度：{{path.lng}}</span><span>维度：{{path.lng}}</span></li>
        </ul>
        <div v-else>请点击进入地图，绘制项目的具体位置</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CommonMap from './mapBaidu'
export default {
  name: '',
  data() {
    return {
      // 地图
      mapShow: false, // 地图显示状态
      center: {lng: 117.000923, lat: 36.675808},
      zoom: 15,
      polygonPath: [], // 绘制图形的经纬度
      projectAdress: '' // 项目地址
    };
  },
  methods: {
    // 点击地图进入详细地图
    mapClick() {
      console.log('点击地图')
      this.mapShow = true
    },
    // 关闭地图详细地图
    mapClose() {
      this.mapShow = false
    }, 
    // 获取详细地图的坐标
    saveMap(e) {
      this.polygonPath = e // 小地图显示的经纬度
      let result = JSON.parse(JSON.stringify(e).replace(/lat/g, 'latitude').replace(/lng/g, 'longitude')) // 更改数组的属性名字
      console.log(result)
    },
    // 获取绘制图形的中心点坐标
    mapCenter(e) {
      this.center = e
      let that = this
      // eslint-disable-next-line no-undef
      var myGeo = new BMap.Geocoder();
      // eslint-disable-next-line no-undef
      myGeo.getLocation(new BMap.Point(e.lng, e.lat), function(res){
        console.log(res)
        that.projectAdress = res.address
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  // 地图
  .map {
    margin-top: 25px;
    width: 100%;
    height: 350px;
    margin-left: 20px;
  }
</style>